{% block sw_users_permissions_role_listing %}
<mt-card
    class="sw-users-permissions-role-listing"
    position-identifier="sw-users-permissions-role-listing"
    :title="$tc('sw-users-permissions.roles.general.cardLabel')"
>

    {% block sw_users_permissions_role_listing_toolbar %}
    <div class="sw-users-permissions-role-listing__toolbar">
        <sw-container
            columns="1fr minmax(100px, 200px)"
            gap="0 10px"
        >
            {% block sw_users_permissions_role_listing_toolbar_search_field %}
            <sw-simple-search-field
                v-model:value="term"
                size="small"
                variant="form"
                @search-term-change="onSearch"
            />
            {% endblock %}

            {% block sw_users_permissions_role_listing_toolbar_add_role_button %}
            <mt-button
                ghost
                size="small"
                :disabled="!acl.can('users_and_permissions.creator') || undefined"
                class="sw-users-permissions-role-listing__add-role-button"
                variant="secondary"
                @click="$router.push({ name: 'sw.users.permissions.role.detail' })"
            >
                {{ $tc('sw-users-permissions.roles.general.labelCreateNewRole') }}
            </mt-button>
            {% endblock %}
        </sw-container>
    </div>
    {% endblock %}

    {% block sw_users_permissions_role_listing_verify_modal %}
    <sw-verify-user-modal
        v-if="confirmPasswordModal"
        @verified="deleteRole"
        @close="onCloseConfirmPasswordModal"
    />
    {% endblock %}

    {% block sw_users_permissions_role_listing_grid %}
    <sw-data-grid
        v-if="showListingResults"
        :data-source="roles"
        :columns="rolesColumns"
        identifier="roles-grid"
        :show-settings="true"
        :show-selection="false"
        :is-loading="isLoading"
        @column-sort="onSortColumn"
    >

        {% block sw_users_permissions_role_listing_grid_actions %}
        <template #actions="{ item }">
            {% block sw_users_permissions_role_listing_grid_actions_edit %}
            <sw-context-menu-item
                :router-link="{ name: 'sw.users.permissions.role.detail', params: { id: item.id } }"
                class="sw-users-permissions-role-listing__context-menu-edit"
                :disabled="!acl.can('users_and_permissions.editor') || undefined"
            >
                {{ $tc('sw-users-permissions.roles.role-grid.contextMenuEdit') }}
            </sw-context-menu-item>
            {% endblock %}

            {% block sw_users_permissions_role_listing_grid_actions_delete %}
            <sw-context-menu-item
                variant="danger"
                class="sw-users-permissions-role-listing__context-menu-delete"
                :disabled="!acl.can('users_and_permissions.deleter') || undefined"
                @click="onDelete(item)"
            >
                {{ $tc('sw-users-permissions.roles.role-grid.contextMenuDelete') }}
            </sw-context-menu-item>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_users_permissions_role_listing_grid_columns %}
        <template #column-name="{ item }">
            {% block sw_users_permissions_role_listing_grid_columns_name %}
            <router-link :to="{ name: 'sw.users.permissions.role.detail', params: { id: item.id } }">
                {{ item.name }}
            </router-link>
            {% endblock %}
        </template>
        {% endblock %}

        {% block sw_users_permissions_role_listing_grid_action_modals %}
        <template #action-modals="{ item }">
            {% block sw_users_permissions_role_listing_grid_actions_modals_modal %}
            <sw-modal
                v-if="getItemToDelete(item)"
                :title="$tc('sw-users-permissions.roles.role-grid.titleModalDelete')"
                variant="small"
                @modal-close="onCloseDeleteModal"
            >
                {% block sw_users_permissions_role_listing_grid_actions_modals_modal_delete_text %}
                <p class="sw-users-permissions-role-listing__confirm-delete-text">
                    {{ $tc('sw-users-permissions.roles.role-grid.textModalDelete', { name: item.name }, 0) }}
                </p>
                {% endblock %}

                {% block sw_users_permissions_role_listing_grid_actions_modals_modal_footer %}
                <template #modal-footer>
                    {% block sw_users_permissions_role_listing_grid_actions_modals_modal_close_delete %}
                    <mt-button
                        size="small"
                        variant="secondary"
                        @click="onCloseDeleteModal"
                    >
                        {{ $tc('global.default.cancel') }}
                    </mt-button>
                    {% endblock %}

                    {% block sw_users_permissions_role_listing_grid_actions_modals_modal_confirm_delete %}
                    <mt-button
                        variant="critical"
                        size="small"
                        @click="onConfirmDelete(item)"
                    >
                        {{ $tc('sw-users-permissions.roles.role-grid.labelButtonDelete') }}
                    </mt-button>
                    {% endblock %}
                </template>
                {% endblock %}
            </sw-modal>
            {% endblock %}
        </template>
        {% endblock %}

        <template #pagination>
            {% block sw_users_permissions_role_listing_grid_pagination %}
            <sw-pagination
                :page="page"
                :limit="limit"
                :total="total"
                :auto-hide="true"
                @page-change="onPageChange"
            />
            {% endblock %}
        </template>
    </sw-data-grid>
    {% endblock %}

    {% block sw_users_permissions_role_listing_empty_state %}
    <sw-empty-state
        v-else
        :absolute="false"
        :title="$tc('sw-users-permissions.roles.role-grid.messageEmptyTitle')"
        :subline="$tc('sw-users-permissions.roles.role-grid.messageEmptySubline')"
    />
    {% endblock %}

</mt-card>
{% endblock %}
